<template>
  <div class="login-content">
    <div class="logo-section">
      <img src="/images/蓝酒馆logo.svg" alt="蓝酒馆" class="app-logo" />
    </div>
    
    <div class="phone-section">
      <img src="/images/+86 135 ____ 4220.svg" alt="手机号" class="phone-number" />
    </div>
    
    <div class="login-actions">
      <button class="one-click-login-btn" @click="handleOneClickLogin">
        <img src="/images/由本机号码一键登录.svg" alt="由本机号码一键登录" />
      </button>
      
      <button class="other-login-btn" @click="handleOtherLogin">
        <img src="/images/其他号码登录.svg" alt="其他号码登录" />
      </button>
    </div>
    
    <div class="social-login-section">
      <div class="social-icons">
        <button class="social-icon" @click="handleWechatLogin">
          <img src="/images/微信登录.svg" alt="微信登录" />
        </button>
        <button class="social-icon" @click="handleQQLogin">
          <img src="/images/qq登录.svg" alt="QQ登录" />
        </button>
        <button class="social-icon" @click="handleGoogleLogin">
          <img src="/images/谷歌登录.svg" alt="谷歌登录" />
        </button>
      </div>
    </div>
    
    <div class="agreement-section">
      <label class="agreement-checkbox">
        <input type="checkbox" v-model="agreeToTerms" />
        <img src="/images/我已阅读并同意《用户使用协议》.svg" alt="我已阅读并同意《用户使用协议》" />
      </label>
    </div>

    <!-- 滑动登录面板 -->
    <div 
      class="login-panel" 
      :class="{ 'show': showPanel }"
      :style="{ backgroundImage: `url(${currentPanelBg})` }"
    >
      <!-- 关闭按钮 -->
      <button class="close-panel-btn" @click="closePanel">×</button>
      
      <!-- 欢迎文字 -->
      <div class="welcome-text">
        <img src="/images/亲爱的kiss欢迎！.svg" alt="亲爱的kiss欢迎！" class="welcome-icon" />
      </div>
      
      <!-- 用户头像 -->
      <div class="user-avatar">
        <img :src="currentAvatar" :alt="currentLoginType + '头像'" class="avatar-icon" />
      </div>
      
      <!-- 一键登录按钮区域 -->
      <div class="one-click-login-area" @click="handleQuickLogin">
        <img src="/images/一键登录.svg" alt="一键登录" class="one-click-login-icon" />
      </div>
      
      <!-- 切换账号按钮 -->
      <div class="switch-account-section">
        <button class="switch-account-btn" @click="handleSwitchAccount">
          <img src="/images/切换账号.svg" alt="切换账号" />
        </button>
      </div>
    </div>

    <!-- 遮罩层 -->
    <div 
      class="panel-overlay" 
      :class="{ 'show': showPanel }"
      @click="closePanel"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const agreeToTerms = ref(false)
const showPanel = ref(false)
const currentPanelBg = ref('')
const currentAvatar = ref('')
const currentLoginType = ref('')

// 登录方式配置
const loginConfigs = {
  wechat: {
    bg: '/images/wxbg.svg',
    avatar: '/images/wxavatar.svg'
  },
  qq: {
    bg: '/images/qqbg.svg',
    avatar: '/images/qqavatar.svg'
  },
  google: {
    bg: '/images/googlebg.svg',
    avatar: '/images/googleavatar.svg'
  }
}

const showLoginPanel = (type: 'wechat' | 'qq' | 'google') => {
  currentLoginType.value = type
  currentPanelBg.value = loginConfigs[type].bg
  currentAvatar.value = loginConfigs[type].avatar
  showPanel.value = true
}

const closePanel = () => {
  showPanel.value = false
}

const handleOneClickLogin = () => {
  if (!agreeToTerms.value) {
    alert('请先同意用户使用协议')
    return
  }
  // 一键登录成功后跳转到主页
  router.push('/home')
}

const handleOtherLogin = () => {
  // 其他号码登录逻辑
  alert('其他号码登录功能')
}

const handleWechatLogin = () => {
  if (!agreeToTerms.value) {
    alert('请先同意用户使用协议')
    return
  }
  showLoginPanel('wechat')
}

const handleQQLogin = () => {
  if (!agreeToTerms.value) {
    alert('请先同意用户使用协议')
    return
  }
  showLoginPanel('qq')
}

const handleGoogleLogin = () => {
  if (!agreeToTerms.value) {
    alert('请先同意用户使用协议')
    return
  }
  showLoginPanel('google')
}

const handleQuickLogin = () => {
  // 第三方一键登录成功后跳转到主页
  closePanel()
  router.push('/home')
}

const handleSwitchAccount = () => {
  alert(`切换${currentLoginType.value}账号`)
  closePanel()
}

// 移除了复杂的点击检测逻辑，现在使用专门的一键登录按钮
</script>

<style scoped>
.login-content {
  padding: 60px 40px 40px;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  background-image: url('/images/loginbg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  padding-top: 65%;
  padding-left: 10%;
}

/* 添加半透明遮罩层以提高内容可读性 */
.login-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* 确保内容在遮罩层之上 */
.login-content > * {
  position: relative;
  z-index: 2;
}

.logo-section {
  text-align: center;
  margin-bottom: 30px;
  margin-left: 30%;
  transform: translateY(-50%);
}

.app-logo {
  max-width: 450px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.phone-section {
  text-align: center;
  margin-bottom: 25px;
}

.phone-number {
  max-width: 280px;
  height: auto;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
}

.login-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
  width: 100%;
  max-width: 280px;
}

.one-click-login-btn,
.other-login-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
}

.one-click-login-btn:hover,
.other-login-btn:hover {
  transform: scale(1.02);
}

.one-click-login-btn:active,
.other-login-btn:active {
  transform: scale(0.98);
}

.one-click-login-btn {
  margin-left: 5%;
}

.one-click-login-btn img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.other-login-btn img {
  width: 30%;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.social-login-section {
  margin-bottom: 30px;
}

.social-icons {
  display: flex;
  gap: 25px;
  justify-content: center;
}

.social-icon {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
}

.social-icon:hover {
  transform: scale(1.1);
}

.social-icon:active {
  transform: scale(0.95);
}

.social-icon img {
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
}

.agreement-section {
  margin-top: auto;
  padding-top: 20px;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 8px;
}

.agreement-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #00D4FF;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #ccc;
  background: white;
  position: relative;
  transition: all 0.2s ease;
}

.agreement-checkbox input[type="checkbox"]:checked {
  background: #00D4FF;
  border-color: #00D4FF;
}

.agreement-checkbox input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.agreement-checkbox img {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* 滑动面板样式 */
.login-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  background-color: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.login-panel.show {
  transform: translateY(0);
}

.close-panel-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.close-panel-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 用户头像样式 */
.user-avatar {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
}

/* 欢迎文字样式 */
.welcome-text {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
}

.welcome-icon {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.avatar-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.8);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* 一键登录按钮区域 */
.one-click-login-area {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 1001;
}

.one-click-login-area:hover {
  transform: translateX(-50%) scale(1.05);
}

.one-click-login-area:active {
  transform: translateX(-50%) scale(0.95);
}

.one-click-login-icon {
  height: 50px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* 遮罩层样式 */
.panel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.panel-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* 响应式调整 */
@media (max-height: 700px) {
  .login-content {
    padding: 40px 40px 30px;
  }
  
  .logo-section {
    margin-bottom: 40px;
  }
  
  .phone-section {
    margin-bottom: 30px;
  }
  
  .login-actions {
    margin-bottom: 30px;
  }
  
  .login-panel {
    height: 80%;
  }
}

/* 切换账号按钮样式 */
.switch-account-section {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.switch-account-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
}

.switch-account-btn:hover {
  transform: scale(1.05);
}

.switch-account-btn:active {
  transform: scale(0.95);
}

.switch-account-btn img {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
</style> 